import React, { useState, useCallback, useEffect } from 'react';
import { Common } from 'UtilsCommon';
import { useGetDataSourceOptions } from 'UseHooks';
import Base from './base';

const getOptions = (property, view, pageAxis, parentValue) => {
    parentValue = parentValue || property.parentValue;

    Base.setValueTextName(property);
    const { valueName, textName } = property;

    const options = [];

    const { dataSource, emptyLabel } = property;

    if (Common.isArray(dataSource)) {
        let value = null; let text = null;

        if (emptyLabel && dataSource.length > 0) options.push({ value: '', text: emptyLabel });

        dataSource.forEach(d => {
            text = d[textName];
            value = d[valueName];

            if (Base.judgePush(d, parentValue, property, view)) {
                options.push({ value, text, data: d });
            }
        });
    }

    return options;
};

const valueChange = (property, view, pageAxis, value) => {
    Base.bindDataValue(property, value);
    Base.childPropertiesChanged(property, view, value);
    if (property.valueChange) property.valueChange(value, Base.getSelectData(property, value));

    if (property.selectDataToProperties) Base.setSelectDataToProperties(property, view, Base.getSelectData(property, value));

    if (property.valueChangeEventActionName && property.isChanged) {
        if (!Common.isEquals(property.value2, value)) {
            pageAxis.invokeEventAction(property.valueChangeEventActionName, { property, view, pageAxis });
        }
    }
    property.value2 = value;
};

const renderItem = (property, m, i, value, onChange) => {
    const selected = Common.isEquals(m.value, value, true);
    let style = selected ? property.selectSpanStyle : property.textStyle;
    if (property.expandSetItemStyle) style = property.expandSetItemStyle(selected, style, property, m);
    return <div key={i} className='buttonActive' style={style} onClick={() => onChange(m.value)}>{m.text}</div>;
};

export default (props) => {
    const { property, view, pageAxis } = Base.getProps(props);

    const [value, setValue] = useState(Base.getInitValue(property));
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [options, setOptions] = useGetDataSourceOptions(property, view, pageAxis, getOptions, property.id);

    const onChange = useCallback((v) => {
        property.isChanged = true;
        setValue(v);
    }, [property, setValue]);

    useEffect(() => {
        valueChange(property, view, pageAxis, value);
    }, [property, view, pageAxis, value]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => setValue(v);
    property.getValue = () => Base.getValue(property, value);
    property.refreshOptions = () => setOptions(getOptions(property, view, pageAxis));

    if (!isVisible || (options.length === 0 && property.isOptionsVisible)) return null;

    const { style, itemsStyle } = property;

    return (
        <div style={style}>
            <div style={itemsStyle}>
                {options.map((m, i) => renderItem(property, m, i, value, onChange))}
            </div>
        </div>
    );
};